import React,{useState,useEffect} from 'react'
import './App.css'
import {useNavigate} from "react-router-dom"
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:3000"
export default function App() {
    let navigate = useNavigate()
    let [list,setlist]=useState([])
    useEffect(()=>{
        getlist()
    },[])
    let getlist=async()=>{
        let {data:{code,data}}=await axios.get('/list')
        if(code===200){
            setlist(data)
        }
    }

   
  return (
    <div>
       
            {/* <button onClick={() => navigate("/list")}>qqq</button> */}
            <div className='box1'>
                <h1>美团</h1>
            </div>
       
               
                   {list.map(item=>(
                    <div key={item._id} id='box2'>
                        <div id='box3'>
                        <img onClick={()=>navigate('/list?id='+item.cid)} src={item.img} alt="" />
                        </div>
                        <div id='box4'>
                            <p>{item.name}</p>
                            <p>{item.area}</p>
                            <p>{item.km}</p>
                        </div>
                    </div>
                  
                   ))}
                
            
    </div>
  )
}
